<template>
	<view :style="{paddingTop:statusBarHeight+'px'}">
		<!-- <popup2></popup2> -->
		
		<div class="wdnr">
			<div class="wdnr_text">
				<image @click="editAvatar" mode="scaleToFill" v-if="userInfo.member.headerImg" class="uni-img-tag"
					:src="userInfo.member.headerImg"></image>
				<image @click="editAvatar" mode="widthFix" v-if="!userInfo.member.headerImg" class="uni-img-tag"
					src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a60.png"></image>
				<div class="wdnr_wb">
					<h2 style="display: flex;">
						{{(userInfo.member.realName || '未认证')}}
						({{levels[userInfo.member.disUserRank]}})
						<navigator class="sj" url="/pages/integral/mall/upgrade/upgrade?id=6">升级</navigator>
						
					</h2>
					<p>手机：{{userInfo.member.disUserName || ''}}
						<navigator class="btn" url="/subPackages/my/real_name" v-if="!realNameStatus">实名认证</navigator>
					</p>
				</div>
			</div>
		</div>
		<div class="xjsy">
			<div class="wdqb">
				<h2>我的钱包</h2>
				<view class="total-income">
					<text class="text">总余额</text>
					<text class="number">{{ (userInfo.amount.allAvaibleAmount) || 0.00}}</text>
				</view>
				<ul>
					<!-- <li>
						<navigator url="/subPackages/my/coupon_detail">
							<image mode="widthFix" class="uni-img-tag"
								src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a9..png">
							</image>
							<div class="wdqb_text">
								<h3>券收益</h3>
								<p>{{userInfo.amount.tradeAvaibleAmount || 0.00}}</p>
								<p class="leiji">累计收益:{{userInfo.amount.tradeTotalAmount || 0.00}}</p>
							</div>
						</navigator>
					</li> -->
					<li>
						<navigator url="/subPackages/my/coupon_detail">
							<image mode="widthFix" class="uni-img-tag"
								src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a9..png">
							</image>
							<div class="wdqb_text">
								<h3>用户上账余额</h3>
								<p>{{userInfo.amount.avaibleAmount || 0.00}}</p>
								<!-- <p class="leiji">累计收益:{{userInfo.amount.tradeTotalAmount || 0.00}}</p> -->
							</div>
						</navigator>
					</li>
					<li>
						<navigator url="/subPackages/my/cash_detail">
							<image mode="widthFix" class="uni-img-tag"
								src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a10.png">
							</image>
							<div class="wdqb_text">
								<h3>现金收益余额</h3>
								<p>{{userInfo.amount.cashRewardAvaibleAmount || 0.00}}</p>
								<!-- <p class="leiji">累计现金:{{userInfo.amount.totalAmount || 0.00}}</p> -->
							</div>
						</navigator>
					</li>
				</ul>
			</div>
			<div class="wztj">
				<ul>
					<li>
						<navigator url="/subPackages/my/tui-jian-ren">
							<image mode="widthFix" class="uni-img-tag"
								src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a62.png">
							</image>
							<p>我的商户</p>
						</navigator>
					</li>
					<li>
						<a href="javascript:" @click="jumpBank">
							<image mode="widthFix" class="uni-img-tag"
								src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a63.png">
							</image>
							<p>银行卡管理</p>
						</a>
					</li>
					<li>
						<navigator url="/subPackages/my/my_tool">
							<image mode="widthFix" class="uni-img-tag"
								src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a64.png">
							</image>
							<p>我的机具</p>
						</navigator>
					</li>
					<!-- <li>
						<navigator url="/subPackages/my/bill">
							<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a65.png"></image>
							<p>我的帐单</p>
						</navigator>
					</li> -->
					<li>
						<navigator url="/subPackages/my/order">
							<image mode="widthFix" class="uni-img-tag"
								src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a66.png">
							</image>
							<p>我的订单</p>
						</navigator>
					</li>
					<li>
						<navigator url="/pages/index/share_code">
							<image mode="widthFix" class="uni-img-tag"
								src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/d2.png">
							</image>
							<p>分享</p>
						</navigator>
					</li>
					<li>
						<navigator url="/subPackages/my/setting">
							<image mode="widthFix" class="uni-img-tag"
								src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a67.png">
							</image>
							<p>设置</p>
						</navigator>
					</li>
				</ul>
			</div>

			<view @click="logout" class="btn5">安全退出</view>
		</div>


	</view>
</template>

<script>
	import user from "@/common/user.js"
	import cache from "@/common/cache.js"
	import http from "@/common/http.js"


	export default {
		data() {
			return {
				levels: {
					'0': "普通商户",
					'1': "VIP",
					'2': "创客",
					'3': "品牌推广",
					'4': "区代",
					'5': "市代",
					'6': "省代",
					'7':"联合创始人",
					'8':"私董会"
				},
				userInfo: {
					member: {},
					amount: {},
				},
				realNameStatus: 0,
				statusBarHeight: 0,
			}
		},
		onShow() {
			this.getUserInfo();
			this.getRealNameInfo();
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			editAvatar() {
				http.uploadFile('/api/v1/upload', ret => {
					let headerImg = ret.url;
					http.request({
						url: '/api/v1/updateUserInfo',
						data: {
							userId: user.getUserId(),
							headerImg: headerImg,
						},
						success: ret => {
							this.userInfo.member.headerImg = headerImg;
							uni.showToast({
								icon: "success",
								title: '修改成功'
							})
						},
						fail: ret => {
							uni.showToast({
								icon: "errot",
								title: '修改失败'
							})
						}
					})

				}, true)
			},
			jumpBank() {
				if (!this.realNameStatus) {
					uni.showModal({
						showCancel: false,
						title: '请先完成实名认证'
					})
					return;
				}
				uni.navigateTo({
					url: '/subPackages/my/bank_card'
				})
			},
			checkRealNameStatus() {
				if (this.realNameStatus == 0) {
					uni.showModal({
						title: '您还没有实名认证',
						content: '点击确定前往实名认证',
						success(ret) {
							if (ret.confirm) {
								uni.navigateTo({
									url: '/subPackages/my/real_name'
								})
							}
						}
					})
				}
			},
			getUserInfo() {
				user.getInfo(info => {
					console.log(info);
					this.userInfo = info;
				})
			},
			logout() {
				cache.del('user_id');
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			getRealNameInfo() {
				user.getRealNameInfo(info => {
					console.log("info:",info);
					this.realNameStatus = (!info || info.verifyStatus != 2) ? 0 : 1;
					// this.checkRealNameStatus();
				})
			}
		}
	}
</script>

<style lang="scss">
	.wdnr_text {
		.uni-img-tag {
			border-radius: 100%;
			width: 110rpx;
			height: 110rpx;
			border: 6rpx solid #ffffff;
		}
	}
	.total-income{
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
		margin-top: -10rpx;
		.number{
			color: #FE2812;
			font-size: 40rpx;
			margin-top: 15rpx;
		}
	}
	.leiji{
		width: 300rpx;
		margin-left: -80rpx;
		margin-top: 10rpx;
    font-size: 24rpx;
    color: #888888;
	}
	.wdnr_wb{
		.sj{
			color: #FE2812;
			margin:  0 0 0 15rpx;
			border: 1px solid #FE2812;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			border-radius:10rpx;
			padding: 0 20rpx;
			margin: 10rpx 0 0 20rpx;
		}
	}
</style>
